<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>
<form class="form-inline" role="form">
    <!-- 条件查询 -->
    <div class="center-pill" style="background:#afd9ee;display:flex">
        &nbsp;
        <div class="form-group">
                <label>项目名称:</label>

            <input type="text" autocomplete="off" id="productName" placeholder="请输入项目名称" class="form-control" style="width: 200px;margin-left:10px">
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <div class="form-group">
            <label>状态：</label>
            <select class="form-control" id="queryPriceStatus">
                <option value="0">全部</option>
                <option value="1">即将开始</option>
                <option value="2">报价中</option>
                <option value="3">正在进行</option>
                <option value="4">已失效</option>
                <option value="5">已取消</option>
                <option value="6">已定标</option>
                <option value="7">待定标</option>
            </select>
        </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <label>活动时间：</label>
        <input type="date" autocomplete="off" id="queryPriceStartDate" placeholder="开始时间" class="form-control" style="width: 200px;margin-left:10px">---
        </div>
        <div class="form-group">
            <input type="date" autocomplete="off" id="queryPriceEndDate" placeholder="结束时间" class="form-control" style="width: 200px;margin-left:10px">
        </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <!-- 查询按钮 -->
        <input style="margin-left:10px" class='btn btn-default' type='button' onclick='queryData()' value='搜索'>
    </div>
</form>

<!-- 新增表单 -->
<form id="myform" method="post">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">延期</h4>
                </div>
                <!- 主表Id隐藏域 ->
                <input type="hidden" name="productId" id="productId">

                <div class="form-group">
                    <label for="queryPriceEndDate1">设置结束日期</label>
                    <input type="date" class="form-control" id="queryPriceEndDate1" placeholder="设置结束日期" name="queryPriceEndDate">
                </div><br>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    <button onclick="save()" class="btn btn-default"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                </div>
            </div>
        </div>
    </div>
</form>

    <table id="myTable"></table>

    <input id="input1"  type="hidden">
</body>
<script>
    $(function (){
        init();
    })
    function init(){
    $("#myTable").bootstrapTable({
        url:"findProduct",
        columns:[
            {field:'checkbox',checkbox:true},
            {field:'productId',title:'项目编码'},
            {field:'productName',title:'项目名称'},
            {field:'queryPriceStartDate',title:'开始时间'},
            {field:'queryPriceEndDate',title:'结束时间'},
            {field:'productCount',title:'参与数量'},
            {field:'queryPriceStatus',title:'状态',formatter:function(value,row){
                if (value == 1){
                    return "即将开始";
                }else if (value == 2){
                    return "报价中";
                }else if (value == 3){
                    return "正在进行";
                }else if (value == 4){
                    return "已失效";
                }else if (value == 5){
                    return "已取消";
                }else if (value == 6){
                    return "已定标";
                }else if (value == 7){
                    return "待定标";
                }else if (value == 14){
                    return "已中标";
                }
                }},
            {field:'cz',title:'操作',formatter:function(value,row){
                    str = '';
                    if (row.queryPriceStatus == 1){
                        str += '<button onclick="updateEnquiry(\''+row.productId+'\')" class="btn btn-warning">修改询价单</button>';
                        str += '<button onclick="cancelEnquiry(\''+row.productId+'\')" class="btn btn-warning">取消询价单</button>';
                    }else if (row.queryPriceStatus == 2){
                        str += '<input type="button" onclick="selectEnquiry(\''+row.productId+'\')" value="查看报价" class="btn btn-warning"/>';
                        str += '<button onclick="updateEnquiry(\''+row.productId+'\')" class="btn btn-warning" >修改询价单</button>';
                        str += '<button onclick="postpone(\''+row.productId+'\')" class="btn btn-warning">延期</button>';
                        str += '<button onclick="cancelEnquiry(\''+row.productId+'\')" class="btn btn-warning">取消询价单</button>';
                    }else if (row.queryPriceStatus == 3){
                        str += '<input type="button" onclick="selectEnquiry(\''+row.productId+'\')" class="btn btn-warning" value="查看报价"/>';
                    }else if (row.queryPriceStatus == 4){
                        str += '<button onclick="resend(\''+row.productId+'\')" class="btn btn-warning">重新发起</button>';
                    }else if (row.queryPriceStatus == 5){
                        str += '<button onclick="resend(\''+row.productId+'\')" class="btn btn-warning">重新发起</button>';
                    }else if (row.queryPriceStatus == 6){
                        str += '<input type="button" onclick="selectEnquiry(\''+row.productId+'\')" class="btn btn-warning" value="查看报价" >';
                        str += '<input type="button" onclick="selectOrderForm(\''+row.productId+'\')" class="btn btn-warning" value="查看订单">';
                    }else if (row.queryPriceStatus == 7){
                        str += '<input type="button" onclick="selectEnquiry(\''+row.productId+'\')" value="查看报价" class="btn btn-warning">';
                        str += '<input type="button"  onclick="cancelEnquiry(\''+row.productId+'\')" class="btn btn-warning" value="取消询价单">';
                    }
                    return str;
                }},
        ],
        //开启分页以后，默认会传入两个参数,而这两个参数，直接是mysql的分页计算后的数据
        pagination:true,
        pageSize:10,
        pageList:[10,20,30,40,50],
        sidePagination : 'client',//server:服务器端分页{rows:[],total:10}|client：前端分页 [{},{}]
    })
    }
    /* 条件查询 */
    function queryData(){
        $("#myTable").bootstrapTable("refresh", {
            "query": {
                "productName": $("#productName").val(),
                "queryPriceStatus": $("#queryPriceStatus").val(),
                "queryPriceStartDate": $("#queryPriceStartDate").val(),
                "queryPriceEndDate": $("#queryPriceEndDate").val(),
            }
        });
    }
    /* 取消询价单 */
    function cancelEnquiry(productId){
        $.ajax({
            url:"cancelEnquiry?productId="+productId,
            success:function(){
                alert("已取消")
                /*刷新表格*/
                $("#myTable").bootstrapTable("refresh")
            }
        })
    }

    /* 重新发起 */
    function resend(productId){
        $.ajax({
            url:"resend?productId="+productId,
            success:function(){
                alert("发起成功,即将进入页面");
                /*刷新表格*/
                $("#myTable").bootstrapTable("refresh")
            }
        })
    }
    /*延期回显*/
    function postpone(productId){
        $('#myModal').modal("show");
        $.ajax({
            url: 'postpone?productId='+productId,
            success: function (data) {
                /*需要回显的话用下面的方法 需要传Id的话加Id*/
                $("input[name='productId']").val(data.queryPriceRequirementType);
                $("input[name='queryPriceEndDate']").val(data.queryPriceEndDate);
            }
        })
    }
    /* 延期修改 */
    function save(productId){
        var id =  $('#productId').val();
        var queryEndDate = $('#queryPriceEndDate1').val();
        $.ajax({
            url:"save",
            data:{id:id,queryEndDate:queryEndDate},
            type:"post",
            dateType:"json",
            success:function(data){
                $('#myModal').modal("hide");
                $("#myTable").bootstrapTable("refresh")
            }
        })
    }

    function selectEnquiry(productId) {
        location.href = "/selectEnquiry?productId="+productId
    }

</script>
</html>